<template>
  <div style="display: flex;line-height: 40px;">
    <div style="margin-top: 8px;">
      <i :class="icon" style="font-size: 20px;cursor: pointer" @click="collapse"></i>
    </div>
    <div style="flex: 1;text-align: center;font-size: 25px">
      <span>欢迎来到旅游管理系统</span>
    </div>
    <div class="block">
      <el-avatar shape="circle" :size="40" :src="user.cover"></el-avatar>
    </div>
    <el-dropdown>
      <span>{{ user.name }}</span><i class="el-icon-arrow-down" style="margin-left: 10px;"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="toUser">个人中心</el-dropdown-item>
        <el-dropdown-item @click.native="toChange">修改密码</el-dropdown-item>
        <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem('CurUser')),
      cover: '',
    }
  },
  //用props接受
  props: {
    icon: String
  },
  methods: {
    // updateUser(user) {  //获取子组件传过来的数据，更新当前页的数据
    //   this.user = user;
    // },
    toUser() {
      // console.log("to_user")
      this.$router.push("/Person")
    },
    toChange(){
      this.$router.push("/ChangePass")
    },
    logout() {
      console.log("logout")

      this.$confirm('您确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',   //确定按钮的文字提示
        type: 'warning',
        center: true,    //文字居中
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '退出登录成功'
          })
          this.$router.push("/")
          sessionStorage.clear()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出登录'
          })
        })
    },
    collapse() {
      this.$emit('doCollapse')
    }
  },
  // created() {
  //   this.$router.push("/Home")
  // }
}
</script>

<style scoped>
.block {
  margin-right: 10px;
  height: 40px;
}
</style>